<template>
  <div class="account">
    <a-row :gutter="gutter">
      <a-col>
        <a-button type="primary">返回</a-button>
      </a-col>
    </a-row>
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="8" :xl="5" :xxl="3">
          <a-form-item label="操作类型：">
            <a-select style="width: 80%" v-model="searchParams.verify_type">
              <a-select-option
                v-for="item in typeList"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="16" :xl="8" :xxl="6">
          <a-form-item label="创建时间">
            <date :value="time" @change="dateChange"/>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :xl="5" :xxl="6">
          <a-form-item label="查询条件：">
            <a-select style="width: 35%" v-model="searchParams.search_type">
              <a-select-option
                v-for="item in searchType"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
            <a-input style="width: 60%" v-model.trim="searchParams.no" placeholder="请输入查询条件"/>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="8" :xxl="5">
          <div class="top-btns">
            <a-button @click="searrchList" type="primary" html-type="submit">查询</a-button>
            <a-button @click="resetcondition">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :columns="columns"
      :rowKey="({uuid}) => uuid"
      :dataSource="columnsData()"
      :pagination="pagination"
      @change="pagesSearch"
      :loading="loading"
    ></a-table>
  </div>
</template>

<script>
操作信息
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 10
      },
      pagination: false,
      operationTypeList: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '登录',
          value: 1
        },
        {
          label: '发起提现',
          value: 2
        },
        {
          label: '邀请用户',
          value: 2
        }
      ],
      searchType: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '用户号',
          value: 1
        },
        {
          label: '手机号',
          value: 2
        }
      ],
      time: [],
      searchParams: {
        verify_type: 0,
        no: '',
        search_type: 0,
        start_time: 0,
        end_item: 0
      },
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'listId'
        },
        {
          title: '用户号',
          dataIndex: 'userId'
        },
        {
          title: '手机号',
          dataIndex: 'phone'
        },
        {
          title: '操作',
          dataIndex: 'operation'
        },
        {
          title: '操作时间',
          dataIndex: 'operationTime'
        },
        {
          title: 'ip',
          dataIndex: 'ip'
        },
        {
          title: '次数',
          dataIndex: 'num'
        }
      ],
      columnsData: function() {
        let arr = []
        for (let i = 0; i < 10; i++) {
          arr.push({
            listId: `${i}`,
            userId: '李振辉',
            phone: 15088792512,
            operation: '登录',
            operationTime: new Date().getTime(),
            ip: '192.168.0.195',
            num: i
          })
        }
        return arr
      }
    }
  },
  methods: {
    // 时间改变
    dateChange({ date, start_time, end_time }) {
      this.time = date
      this.searchParams.start_time = start_time
      this.searchParams.end_time = end_time
      console.log(date, start_time, end_time)
    },
    pagesSearch() {},
    // 重置
    resetcondition() {
      this.time = []
      this.searchParams = {
        verify_type: 0,
        no: '',
        search_type: 0,
        start_time: 0,
        end_item: 0
      }
    },
    // 搜索
    searrchList() {
      console.log(this.searchParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  margin-top: 15px;
  .price-content {
    margin-top: 20px;
    font-size: 20px;
  }
}
</style>